/**
 * Vite 配置文件 (Vite Configuration File)
 * 
 * 功能说明：
 * - 配置开发服务器和构建工具
 * - 设置代理转发API请求到后端服务器
 * - 配置React插件和JSX支持
 * - 设置构建输出目录和优化选项
 * - 配置路径别名，简化导入路径
 * - 设置CSS预处理器和主题定制
 * 
 * 技术特性：
 * - 热模块替换 (HMR) - 开发时实时更新
 * - 代理转发 - 解决跨域问题
 * - 代码分割 - 优化加载性能
 * - 路径别名 - 简化模块导入
 * - 主题定制 - Ant Design主题配置
 * - 构建优化 - 生产环境代码优化
 * 
 * 安全特性：
 * - 开发环境代理配置
 * - 生产环境代码压缩和混淆
 * - 静态资源安全处理
 * - WebSocket安全连接
 * 
 * 性能优化：
 * - 代码分割和懒加载
 * - 静态资源优化
 * - 缓存策略配置
 * - 构建产物优化
 */

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  /**
   * 插件配置
   * 
   * React插件提供：
   * - JSX语法支持
   * - 热模块替换 (HMR)
   * - Fast Refresh功能
   * - 开发时错误提示
   */
  plugins: [react()],
  
  /**
   * 路径解析配置
   * 
   * 路径别名功能：
   * - 简化导入路径
   * - 避免相对路径过长
   * - 提高代码可读性
   * - 便于模块重构
   */
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),                    // 源码根目录
      '@components': path.resolve(__dirname, './src/components'), // 组件目录
      '@pages': path.resolve(__dirname, './src/pages'),         // 页面目录
      '@services': path.resolve(__dirname, './src/services'),   // 服务目录
      '@utils': path.resolve(__dirname, './src/utils'),         // 工具目录
      '@stores': path.resolve(__dirname, './src/stores'),       // 状态管理目录
      '@assets': path.resolve(__dirname, './src/assets')        // 静态资源目录
    }
  },

  /**
   * 开发服务器配置
   * 
   * 开发环境特性：
   * - 热模块替换 (HMR)
   * - 实时错误提示
   * - 代理转发API请求
   * - 自动打开浏览器
   * - 支持外部访问
   */
  server: {
    port: 3001,           // 前端开发服务器端口（避免与后端5000端口冲突）
    host: '0.0.0.0',      // 允许外部访问（支持局域网访问）
    open: true,           // 自动打开浏览器
    
    /**
     * API代理配置
     * 
     * 代理功能：
     * - 解决开发环境跨域问题
     * - 将前端请求转发到后端服务器
     * - 支持WebSocket连接
     * - 静态资源代理
     */
    proxy: {
      /**
       * API请求代理
       * 将所有 /api 开头的请求转发到后端服务器
       */
      // 注意：Python后端路由注册时没有/api前缀，直接映射到根路径
      '/api': {
        target: 'http://localhost:8000',  // Python后端API服务器地址
        changeOrigin: true,               // 改变请求源地址，解决跨域
        secure: false                     // 允许自签名证书（开发环境）
      },
      
      /**
       * 静态资源代理
       * 将上传文件请求转发到后端服务器
       */
      '/uploads': {
        target: 'http://localhost:8000',  // 后端静态资源服务器地址
        changeOrigin: true,               // 改变请求源地址
        secure: false                     // 允许自签名证书
      },
      
      /**
       * WebSocket代理
       * 支持实时通信功能
       */
      '/socket.io': {
        target: 'http://localhost:8000',  // WebSocket服务器地址
        ws: true,                         // 启用WebSocket代理
        changeOrigin: true                // 改变请求源地址
      }
    }
  },

  /**
   * 构建配置
   * 
   * 生产环境构建特性：
   * - 代码压缩和混淆
   * - 静态资源优化
   * - 代码分割
   * - 源码映射生成
   * - 缓存优化
   */
  build: {
    outDir: 'dist',       // 构建输出目录
    sourcemap: true,      // 生成源代码映射（便于调试）
    
    /**
     * Rollup构建选项
     * 
     * 代码分割策略：
     * - vendor: 第三方库分离
     * - antd: UI组件库分离
     * - router: 路由库分离
     * - 提高缓存效率和加载性能
     */
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],           // React核心库
          antd: ['antd'],                          // Ant Design组件库
          router: ['react-router-dom']             // 路由库
        }
      }
    }
  },

  /**
   * CSS预处理器配置
   * 
   * 样式处理特性：
   * - Less预处理器支持
   * - Ant Design主题定制
   * - 变量和混合器支持
   * - 自动前缀处理
   */
  css: {
    preprocessorOptions: {
      less: {
        /**
         * Ant Design主题定制
         * 
         * 主题变量：
         * - @primary-color: 主色调
         * - @border-radius-base: 基础圆角大小
         * - 支持更多主题变量定制
         */
        modifyVars: {
          '@primary-color': '#1890ff',    // 主色调（蓝色）
          '@border-radius-base': '6px'    // 基础圆角大小
        },
        javascriptEnabled: true           // 启用JavaScript表达式支持
      }
    }
  }
}) 
